<html>
<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></script>
	<script src="jquery.jot.js" /></script>
</head>
<body>
<!-- Embed data name using id attribute, you can 
    also use var if you need change element's attributes
    or you don't like repeating ids -->
	
	
    <div id="person">
        <!-- 
		mapping written in JS object {attr_name: key_name}
            following IMG's src will be changed to data['avatar]
            alt will be changed to data['firstname']
        -->
        <img var="{src: 'avatar', alt: 'firstname'}" />
        <!-- Simple mapping, id is the key name of the data you passed-->
        Name: <span id="firstname"></span>
        <u id="lastname"></u>
        Dob: <span id="dob"></span>
        
    </div>
	
	
	<!-- Treat template as a block -->
	<ul id="persons">
	   <li id="person_template">
            Name: <span id="firstname"></span>
	        <u id="lastname"></u>
	        Dob: <span id="dob"></span>
	   </li> 
	</ul>
	
    <script>
	
	example1 = function() {
		person = {
		   firstname: 'William',
		   lastname: 'Yang',
		   dob: '1979-09-10',
		   avatar: 'me.jpg',
		}
		// Update above html block above with person
		$('#person > *').jot(person)
	}
	
	example2 = function () {
		persons = [{
		   firstname: 'William',
		   lastname: 'Yang',
		   dob: '1979-09-10'
		},
		{
		   firstname: 'Unix',
		   lastname: 'Timestamp',
		   dob: '1970-01-01'
		}    
		]
		// Update above html block above with person
		template = $("#persons").html()
		$("#persons").empty();
		console.log(template);
		$('#persons').jot_block({
					template: template,
					name: 'person',
					data: persons
				})
	}
	
	$(document).ready(function() {
		example1();
		example2();
	});
	
    </script>